<template>
  <div class="structuration-buy">
    <div class="dy-header">
      <x-header :right-options="{showMore: false}" :left-options="{preventGoBack:true}" @on-click-back="back">购买</x-header>
    </div>
    <div class="dy-body">
      <group gutter="0">
        <div class="top-info">
          <h3>沪深300指数看涨</h3>
          <div class="info-detail">
            <div class="expected-return">
              <span>预期收益</span>
              <span>0.01-8.0%</span>
            </div>
            <div class="date-limit">
              <span>投资期限</span>
              <span>184天</span>
            </div>
          </div>
        </div>
      </group>
      <div class="cell-list">
        <group>
          <popup-radio title="付款账号" :options="AccountLists" v-model="AccountList">
            <p slot="popup-header" class="title-slot">请选择银行卡</p>
          </popup-radio>
          <cell :title="('账户余额')" :value="accountBalance"></cell>
        </group>
      </div>
      <div class="money-input">
        <div>请输入购买金额</div>
        <label for="tranAmt">￥</label>
        <div class="iput-div"><input type="number" id="tranAmt" placeholder="50,000.00元起投" v-model="inputAmount" @blur="format"></div>
        <div class="waring" v-show="show">账户余额不足</div>
      </div>
      <div class="check-clause">
        <div class="left-check">
          <div class="box" @click="checkClick1"><img v-if="checked1 === true" class="check-icon" src="../../../assets/img/Insurance/check.png"></div>
        </div>
        <div class="right-text">
          本人已认真阅读并充分理解<span>《产品条款》、</span><span>《保投保协议书》、</span><span>《投保人/被保险人声明》</span>的内容（特别是保险产品条款中的责任免除内容），阅读并知悉我行官方网站保险产品<span>信息披露</span>专栏的告知内容
        </div>
      </div>
      <div class="go-to-next"><x-button type="primary" :disabled="disclick" @click.native="gotoNext()">下一步</x-button></div>
      <zx-dialog v-model="tipsShow1" title="提示" type="tips" butType="choose" :data="['取消', '确认']" @on-click-no="clickNo" @on-click-yes="clickYes">
        <div slot="body">
          该产品为{{ prdName }}，购买金额为{{ inputAmount }}元，是否确认购买？
        </div>
      </zx-dialog>
    </div>
  </div>
</template>

<script>
export default{
  data () {
    return {
      aaa: '',
      show: false,
      checked1: false,
      tipsShow1: false,
      prdName: '',
      rate: '',
      inputAmount: '',
      accountBalance: '100000',
      AccountList: '6217 *** *** 9807',
      AccountLists: ['6217 *** *** 9807', '6207 *** *** 987', '6097 *** *** 987'] // 转出账号列表
    }
  },
  computed: {
    disclick () {
      if (this.show === false && this.checked1 === true && this.inputAmount !== '' && this.inputAmount >= 50000) {
        return false
      } else {
        return true
      }
    }
  },
  watch: {
    inputAmount (newVal, oldVal) {
      let all = parseInt(this.accountBalance)
      if (newVal > all) {
        this.show = true
      } else {
        this.show = false
      }
    }
  },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    gotoNext () {
      this.tipsShow1 = true
    },
    format () {
      console.log('aaa')
    },
    checkClick1 () {
      if (this.checked1) {
        this.checked1 = false
      } else {
        this.checked1 = true
      }
    },
    clickNo () {
      this.tipsShow1 = false
    },
    /*
    *  调用原生键盘
    */
    showPayKeyboard () {
      let _this = this
      this.$bridge.callhandler('showPayKeyboard', null,
        function (response) {
          // response = JSON.parse(response)
          // _this.aaa = JSON.stringify(response)
          // if (response.status === 0 || response.status === '0') {
          //   this.$router.replace({name: 'CurrentPlusResult', query: {prdName: this.prdName, rate: this.rate, amount: this.inputAmount}})
          // } else {
          //   console.log('fail')
          // }
          _this.$router.replace({name: 'CurrentPlusResult', query: {prdName: _this.prdName, rate: _this.rate, amount: _this.inputAmount}})
        }
      )
    },
    clickYes () {
      this.showPayKeyboard()
    },
    setOutCardInfo (val) {
      this.formVal.cardNo.val = val[0]
      this.balanceAmt = val[1]
    }
  },
  mounted () {
    this.prdName = this.$route.query.prdName
    this.rate = this.$route.query.rate
  }
}
</script>

<style lang="less">
  .title-slot{
    padding: 0.1rem 0;
    text-align: center;
    color: #9B9B9B;
  }
  .structuration-buy{
    .dy-body{
      .top-info{
        width: 100%;
        height: 1.2rem;
        padding: 0 .3rem;
        h3{
          width: 100%;
          height: .6rem;
          line-height: .6rem;
          font-size:.34rem;
        }
        .info-detail{
          width: 100%;
          height: .6rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          line-height: .6rem;
          font-size: .25rem;
          .expected-return, .date-limit{
            width: 50%;
            height: .6rem;
            span{
              margin-right: .4rem;
            }
          }
        }
      }
      .money-input{
        padding: 0.2rem 0.3rem 0.1rem;
        margin-top: 0.2rem;
        height: 2.1rem;
        font-size: 0.34rem;
        background: #fff;
        .iput-div{
          display: inline-block;
          padding: 0.4rem 0 0.2rem;
        }
        .waring{
          font-size: 0.24rem;
          color: #F23E00;
        }
      }
      .check-clause{
        display: flex;
        padding-top: 0.2rem;
        .right-text{
          position: relative;
          left: -0.18rem;
          display: inline-block;
          padding-left: 0.1rem;
          font-size: 0.26rem;
          width: 6.3rem;
          color: #9B9B9B;
          text-align: justify;
          >span{
            color: #4a90e2;
          }
        }
        .left-check{
          .box{
            margin: 0.1rem 0.2rem 0 0.3rem;
            border: 1px solid #BFBFBF;
            height: 0.26rem;
            width: 0.26rem;
            .check-icon{
              position: relative;
              top: -0.05rem;
              width:0.27rem;
              height: 0.27rem;
            }
          }
        }
      }
      .go-to-next{
        margin: 0.6rem auto;
        width: 92%;
      }
    }
  }
</style>
